<template>
  <div @click="click">text: {{x.text}}</div>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    name: 'HelloWorld',
    props: {
      text: String
    },
    data() {
      return {
        y: {}
      }
    },
    created() {
      let watchs = {}
      
      this.x = new Proxy(this.y, {
        get: (obj, prop) => {
          if (prop in obj) return obj[prop]
          if (prop in this.$props) return this.$props[prop]
        },
        set: (obj, prop, newval) => {
          if (!watchs[prop]) {
            watchs[prop] = this.$watch(prop, (v) => obj[prop] = v)
          }
          obj[prop] = newval
          return true
        }
      })
    },
    methods: {
      click() {
        this.x.text = 'inner'
        console.log(this.x.text)
      }
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
